<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义提示框</title>
    <link rel="stylesheet" href="./08-自定义提示框.css">
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	ul {
	    list-style: none;
	}
	
	.example-2 {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
	.example-2 .icon-content {
	    margin: 0 10px;
	    position: relative;
	}
	
	.example-2 .icon-content .tooltip {
	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);
	    color: #fff;
	    padding: 6px 10px;
	    border-radius: 5px;
	    opacity: 0;
	    visibility: hidden;
	    font-size: 14px;
	    transition: all 0.3s ease;
	}
	
	.example-2 .icon-content:hover .tooltip {
	    opacity: 1;
	    visibility: visible;
	    top: -50px;
	}
	
	.example-2 .icon-content a {
	    position: relative;
	    overflow: hidden;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 50px;
	    height: 50px;
	    border-radius: 50%;
	    color: #4d4d4d;
	    background-color: #fff;
	    transition: all 0.3s ease-in-out;
	}
	
	.example-2 .icon-content a:hover {
	    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
	}
	
	.example-2 .icon-content a svg {
	    position: relative;
	    z-index: 1;
	    width: 30px;
	    height: 30px;
	}
	
	.example-2 .icon-content a:hover {
	    color: white;
	}
	
	.example-2 .icon-content a .filled {
	    position: absolute;
	    top: auto;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 0;
	    background-color: #000;
	    transition: all 0.3s ease-in-out;
	}
	
	.example-2 .icon-content a:hover .filled {
	    height: 100%;
	}
	
	.example-2 .icon-content a[data-social="discord"] .filled,
	.example-2 .icon-content a[data-social="discord"]~.tooltip {
	    background-color: #7289da;
	}
	
	.example-2 .icon-content a[data-social="steam"] .filled,
	.example-2 .icon-content a[data-social="steam"]~.tooltip {
	    background-color: #171d25;
	}
	
	.example-2 .icon-content a[data-social="instagram"] .filled,
	.example-2 .icon-content a[data-social="instagram"]~.tooltip {
	    background: linear-gradient(45deg,
	            #405de6,
	            #5b51db,
	            #b33ab4,
	            #c135b4,
	            #e1306c,
	            #fd1f1f);
	}
	
	.example-2 .icon-content a[data-social="youtube"] .filled,
	.example-2 .icon-content a[data-social="youtube"]~.tooltip {
	    background-color: #ff0000;
	}
</style>
<body>
    <ul class="example-2">
        <li class="icon-content">
          <a href="https://discord.com/" aria-label="Discord" data-social="discord">
            <div class="filled"></div>
            <svg
              viewBox="0 0 16 16"
              class="bi bi-discord"
              fill="currentColor"
              height="16"
              width="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
              ></path>
            </svg>
          </a>
          <div class="tooltip">Discord</div>
        </li>
        <li class="icon-content">
          <a
            href="https://store.steampowered.com/"
            aria-label="Steam"
            data-social="steam"
          >
            <div class="filled"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-steam"
              viewBox="0 0 16 16"
            >
              <path
                d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006 4.304 1.769A2.2 2.2 0 0 1 5.62 8.88l1.96-2.844-.001-.04a3.046 3.046 0 0 1 3.042-3.043 3.046 3.046 0 0 1 3.042 3.043 3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11 2.22 2.22 0 0 1-1.312-1.568L.33 10.333Z"
              ></path>
              <path
                d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165 1.7 1.7 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029 2.03 2.03 0 0 0 2.027-2.029 2.03 2.03 0 0 0-2.027-2.027 2.03 2.03 0 0 0-2.027 2.027m2.03-1.527a1.524 1.524 0 1 1-.002 3.048 1.524 1.524 0 0 1 .002-3.048"
              ></path>
            </svg>
          </a>
          <div class="tooltip">Steam</div>
        </li>
        <li class="icon-content">
          <a
            href="https://www.instagram.com/"
            aria-label="Instagram"
            data-social="instagram"
          >
            <div class="filled"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-instagram"
              viewBox="0 0 16 16"
              xml:space="preserve"
            >
              <path
                d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
                fill="currentColor"
              ></path>
            </svg>
          </a>
          <div class="tooltip">Instagram</div>
        </li>
      </ul>
      
</body>
</html>